<template>
	<view class="container">
		<view class="header">
			<text class="gradient-title">赛博木鱼</text>
			<view class="score-container">
				<text class="score">{{ score }}</text>
				<text class="description">功德</text>
			</view>
		</view>
		<view class="fish-hammer-container" @click="hitFish">
			<image :src="fishImage" class="fish" :class="{ 'fish-hit': isFishHit }"></image>
			<image :src="hammerImage" class="hammer" id="hammer" :class="{ 'hammer-hit': isHammerHit }"></image>
			<text class="gongde-display" id="gongdeDisplay" :class="{ 'gongde-show': isGongdeShow }">功德+1</text>
		</view>
		<view class="footer">
			轻敲木鱼，细悟赛博真经。
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				score: 0,
				fishImage: '/static/muyu.png',
				hammerImage: '/static/muyu_chuizi.png',
				soundUrl: '/static/qiaomuyu.mp3',
				isFishHit: false,
				isHammerHit: false,
				isGongdeShow: false,
				innerAudioContext: null
			};
		},
		onLoad() {
			// Initialize audio context
			if (typeof uni.createInnerAudioContext === 'function') {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = this.soundUrl;
				this.innerAudioContext.loop = false;
			}
		},
		onUnload() {
			// Destroy audio context when page is unloaded
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy();
			}
		},
		methods: {
			hitFish() {
				// Play sound immediately
				if (this.innerAudioContext) {
					this.innerAudioContext.seek(0);
					this.innerAudioContext.play();
				}

				// Trigger animations
				this.isFishHit = true;
				this.isHammerHit = true;
				this.isGongdeShow = true;

				// Reset animations after delay
				setTimeout(() => {
					this.isFishHit = false;
					this.isHammerHit = false;
					this.isGongdeShow = false;
				}, 100);

				// Update score
				this.score++;
			}
		}
	};
</script>

<style>
	.container {
		background-color: #121212;
		color: #FFFFFF;
		font-family: 'PingFang SC', sans-serif;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		height: 100vh;
	}

	.header {
		text-align: center;
		position: relative;
		top: 100rpx;
	}

	.header .gradient-title {
		font-size: 25vw;
		font-family: 'Kaiti SC', sans-serif;
		background: linear-gradient(180deg, rgba(255, 176, 103, 0.05), rgba(115, 55, 0, 0.02));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		margin: 0;
	}

	.header .score-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 40rpx;
	}

	.header .score-container .score {
		font-size: 100rpx;
		font-weight: 900;
	}

	.header .score-container .description {
		font-size: 50rpx;
	}

	.fish-hammer-container {
		position: relative;
		cursor: pointer;
		margin-top: 200rpx;
	}

	.fish-hammer-container .fish {
		width: 284rpx;
		height: 236rpx;
		transition: transform 0.1s ease-in-out;
	}

	.fish-hammer-container .fish.fish-hit {
		transform: scale(1.1);
	}

	.fish-hammer-container .hammer {
		position: absolute;
		right: -60rpx;
		top: -40rpx;
		width: 119rpx;
		height: 69rpx;
		transform-origin: bottom left;
		transition: transform 0.1s ease-in-out;
	}

	.fish-hammer-container .hammer.hammer-hit {
		transform: rotate(-25deg);
	}

	.fish-hammer-container .gongde-display {
		position: absolute;
		font-family: 'PingFang SC', sans-serif;
		font-size: 30rpx;
		opacity: 0;
		transform: translateY(-20rpx);
		transition: opacity 0.4s ease-out, transform 0.4s ease-out;
	}

	.fish-hammer-container .gongde-display.gongde-show {
		opacity: 1;
		transform: translateY(-40rpx);
	}

	.footer {
		font-family: 'Kaiti SC', sans-serif;
		font-size: 24rpx;
		margin-bottom: 100rpx;
	}
</style>